<template>
  <div class="app-container">
    <div class="first">
    <el-form :model="indexqueryParams" ref="queryForm" size="small" :inline="true"  label-width="70px" >

      <!--    <el-form-item label="日期">
            <el-date-picker
              v-model="dateRange"
              type="datetimerange"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              style="width: 230px">
            </el-date-picker>
          </el-form-item>
          <el-form-item label="部门" class="department">
            <el-select v-model="value" placeholder="请选择部门"
                       style="width: 230px">
              <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value"
                style="width: 140px"
              >
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="项目" class="entryName">
            <el-input v-model="input1" placeholder="请输入项目"
                      style="width: 230px">
            </el-input>
          </el-form-item>
       <el-form-item label="班次" class="banci">
        <el-input v-model="input2" placeholder="请输入班次"
                  style="width: 230px">
        </el-input>
      </el-form-item>
      <el-form-item label="吧台" class="batai">
        <el-input v-model="input3" placeholder="请输入吧台"
                  style="width: 230px">
        </el-input>
      </el-form-item>-->
      <el-form-item label="品类名称" prop="dictLabel">
        <el-input v-model="indexqueryParams.dictLabel" placeholder="请输入品类名称"
                  style="width: 230px">
        </el-input>
      </el-form-item>
     <!-- <el-form-item label="服务员" class="fuwuyuan">
        <el-input v-model="input5" placeholder="请输入服务员"
                  style="width: 230px">
        </el-input>
      </el-form-item>
      <el-form-item label="手牌号">
        <el-input v-model="input6" placeholder="请输入手牌号"
                  style="width: 230px">
        </el-input>
      </el-form-item>-->

      <div style="text-align: right;margin-right:-9px;">
        <el-form-item>
          <el-button type="primary" icon="el-icon-search" size="mini" @click="getindexList">搜索</el-button>
      <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
        </el-form-item>
      </div>
    </el-form>
  </div>
    <div class="second">
    <!--  <el-table
        :data="tableData"
        border
        style="width: 100%">
        <el-table-column
          prop="number"
          align="center"
          label="序号"
          width="200">
        </el-table-column>
        <el-table-column
          prop="pinleimingcheng"
          align="center"
          label="品类名称"
          width="1000">

        </el-table-column>
        <el-table-column
          align="center"
          label="操作">
          <template slot-scope="scope">
            <el-button type="text"  @click="xiangqing(scope.row)">详情</el-button>
          </template>
        </el-table-column>
      </el-table>-->

      <el-table v-loading="indexloading" :data="dataList" border >
        <el-table-column type="index" label="序号"  width="55" :index="indexMethod" align="center"/>
        <el-table-column label="品类名称" align="center" prop="dictLabel">
          <template slot-scope="scope">
            <span v-if="scope.row.listClass == '' || scope.row.listClass == 'default'">{{scope.row.dictLabel}}</span>
            <el-tag v-else :type="scope.row.listClass == 'primary' ? '' : scope.row.listClass">{{scope.row.dictLabel}}</el-tag>
          </template>
        </el-table-column>
       <!-- <el-table-column label="字典键值" align="center" prop="dictValue" />-->
        <el-table-column
          align="center"
          label="操作">
          <template slot-scope="scope">
            <el-button type="text"  @click="xiangqing(scope.row)">详情</el-button>
          </template>
        </el-table-column>
      </el-table>
      <div style="background: #F8F8F9;width: 100%;height: 44px;">
        <el-row>
          <div style="margin-top: 11px;margin-left: 90%;font-weight: bold;font-size: 16px">今日总营业额：{{ amount }}元</div>
        </el-row>
      </div>


      <pagination
        v-show="total>0"
        :total="total"
        :page.sync="indexqueryParams.pageNum"
        :limit.sync="indexqueryParams.pageSize"
        @pagination="getindexList"
      />
    </div>









    <el-dialog :title="title" :visible.sync="open" width="1100px" append-to-body>
      <span>

<el-table v-loading="loading"  max-height="500"  :data="xiangqingdetailsList" border :summary-method="getSummaries" show-summary>
       <el-table-column type="index" label="序号"  width="55" :index="indexMethod" align="center"/>


      <el-table-column label="项目名称" align="center" prop="entryName" />
      <el-table-column label="项目类别" align="center" prop="projectCategory" />
      <el-table-column label="项目代码" align="center" prop="projectCode" />
      <el-table-column label="助记码" align="center" prop="mnemonicCode" />
      <el-table-column label="单位" align="center" prop="unit" />
      <el-table-column label="单价" align="center" prop="unitPrice" />



      <el-table-column label="班次标志" align="center" prop="sailingsSigns" />
      <el-table-column label="录单时间" align="center" prop="recordingTime" width="180">
        <template slot-scope="scope">
          <span>{{ parseTime(scope.row.recordingTime, '{y}-{m}-{d}') }}</span>
        </template>
      </el-table-column>
      <el-table-column label="数量" align="center" prop="quantity" />
      <el-table-column label="合计金额" align="center" prop="totalAmount" />


    </el-table>

  <!--<pagination
      v-show="total>0"
      :total="total"
      :page.sync="queryParams.pageNum"
      :limit.sync="queryParams.pageSize"
      @pagination="getList"
    />-->
      </span>
      <span slot="footer" class="dialog-footer">
    <el-button @click="fanhui()">返回</el-button>

  </span>
    </el-dialog>
  </div>
</template>

<script>
  import { listData, getData, delData, addData, updateData } from "@/api/system/dict/data";
import{addDetails,delDetails,getDetails,listDetails,updateDetails} from"@/api/module/wyw/Dryye"
/*
import {addProject, delProject, getProject, listProject, updateProject} from "@/api/module/wyw/project";
*/

export default {

  dicts:['yqg_project_category'],
  data() {
    return {
      amount: 0, // 总价格
      detailsList: [],
      // 消费详细表格数据
      xiangqingdetailsList: [],
      // 总条数
      total: 0,
      // 遮罩层
      dataList: [],
      indexloading: true,
     loading: true,
      dialogVisible: false,
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        userId: null,
        deptId: null,
        department: null,
        nickName: null,
        userName: null,
        post: null,
        checkoutUserName: null,
        checkoutNickName: null,
        handBrand: null,
        originalHand: null,
        handCategory: null,
        handState: null,
        retentionStatus: null,
        mergeStatus: null,
        openingTime: null,
        drawTime: null,
        mergeHands: null,
        mergeBarBillsId: null,
        leaveTime: null,
        beforeLeave: null,
        beforeBarBillsId: null,
        entryName: null,
        projectCategory: null,
        projectCode: null,
        mnemonicCode: null,
        unit: null,
        unitPrice: null,
        commissionPrice: null,
        together: null,
        handoverStatus: null,
        sailingsSigns: null,
        barBillsId: null,
        recordingTime: null,
        quantity: null,
        totalAmount: null,
        seat: null,
        orderNumber: null,
        paymentMethod: null,
        consumptionStatus: null,
        chargebackTime: null,
        reasonForChargeback: null,
        chargebackProcessorAccount: null,
        chargebackProcessorName: null,
        clockTime: null,
        nextClockTime: null,
        nextClockStatus: null,
        clock: null,
        nextClock: null,
        distanceNextClock: null,
        clockChangeSituation: null,
        timeRemaining: null,
        recordEmployeeNumber: null,
        recorderEmployeeName: null,
        technicianEvaluation: null,
        roomType: null,
        openingHours: null,
        checkOutTime: null,
        checkOutStatus: null,
        inmate: null,
        whetherLeave: null,
        note1: null,
        note2: null,
        note3: null,
        note4: null,
        note5: null,
        note6: null,
        note7: null,
        note8: null,
        note9: null,
        note10: null
      },
// 弹出层标题
      title: "",
      // 是否显示弹出层
      open: false,
      tableData: [{
        number: '1',
        pinleimingcheng: '软饮',

      }, {
        number: '2',
        pinleimingcheng: '香烟',

      }, {
        number: '3',
        pinleimingcheng: '茶水',

      }],
      options: [{
        value: '选项1',
        label: '前厅部'
      }, {
        value: '选项2',
        label: '洗浴部'
      }, {
        value: '选项3',
        label: '房务部'
      }, {
        value: '选项4',
        label: '餐厅部'
      }, {
        value: '选项5',
        label: '后勤保障部'
      },
        {
       value: '选项6',
       label: '财务部'
     }],

      value: '',
      input1: '',
      input2: '',
      input3: '',
      input4: '',
      input5: '',
      input6: '',

      // 日期范围
      dateRange: [],
      // 查询参数
      indexqueryParams: {
        pageNum: 1,
        pageSize: 10,
        dictName: undefined,
        dictType: 'yqg_project_category',
        status: undefined
      },
    }
  },
  created() {
    this.getList();
    this.getindexList();
  },
  methods: {
    getindexList() {
      this.indexloading = true;
      listData(this.indexqueryParams).then(response => {
        this.dataList = response.rows;

        this.total = response.total;
        this.indexloading = false;
      });
    },



    // 计算表格底部的数据
    getSummaries(param) {
      const {columns, data} = param;
      const sums = [];
      //第一列命名合计
      columns.forEach((column, index) => {
        if (index === 0) {
          sums[index] = '合计';
          return;
        }
        const values = data.map(item => Number(item[column.property]));
        //指定allCompanyNum、allCarNum、allDriverNum不求和，其余列军求和
        if ( column.property == 'totalAmount') {
          sums[index] = values.reduce((prev, curr) => {
            const value = Number(curr);
            if (!isNaN(value)) {
              return prev + curr;
            } else {
              return prev;
            }
          }, 0);
          sums[index];
        } else {
          sums[index] = ''
        }
      });
      return sums
    },
    fanhui(){
      this.open = false;
      this.reset();
    },
    indexMethod(index) {
      index = (index + 1) + (this.queryParams.pageNum - 1) * this.queryParams.pageSize
      return index
    },

    /** 修改按钮操作 */
    xiangqing(row) {


      this.loading = true;

    this.queryParams.projectCategory=row.dictValue;
      listDetails(this.queryParams).then(response => {
        this.xiangqingdetailsList = response.rows;

        this.open = true;
        this.title = "查看消费详情";
        this.loading = false;
      });
    },

    handleClose(done) {
      this.$confirm('确认关闭？')
        .then(_ => {
          done();
        })
        .catch(_ => {});
    },

    /** 查询消费详细列表 */
    getList() {
      this.loading = true;
      listDetails(this.queryParams).then(response => {
        const rows = response.rows;
        const sum = rows.reduce((prev, curr) => prev + parseFloat(curr.totalAmount), 0);
        console.log(sum+"sum")
        this.xiangqingdetailsList = rows;
        this.amount = sum; // 可以根据需要保留小数位数
        this.total = response.total;
        this.loading = false;

      });
    },
    // 取消按钮
    cancel() {
      this.open = false;
      this.reset();
    },
    // 表单重置
    reset() {
      this.form = {
        ID: null,
        userId: null,
        deptId: null,
        department: null,
        nickName: null,
        userName: null,
        post: null,
        handBrand: null,
        handCategory: null,
        handState: null,
        retentionStatus: null,
        mergeStatus: null,
        openingTime: null,
        drawTime: null,
        mergeHands: null,
        mergeBarBillsId: null,
        leaveTime: null,
        beforeLeave: null,
        beforeBarBillsId: null,
        entryName: null,
        projectCategory: null,
        projectCode: null,
        mnemonicCode: null,
        unit: null,
        unitPrice: null,
        commissionPrice: null,
        together: null,
        sailingsSigns: null,
        barBillsId: null,
        recordingTime: null,
        quantity: null,
        totalAmount: null,
        seat: null,
        orderNumber: null,
        paymentMethod: null,
        consumptionStatus: null,
        chargebackTime: null,
        reasonForChargeback: null,
        chargebackProcessorAccount: null,
        chargebackProcessorName: null,
        clockTime: null,
        nextClockTime: null,
        nextClockStatus: null,
        recordEmployeeNumber: null,
        recorderEmployeeName: null,
        roomType: null,
        openingHours: null,
        checkOutTime: null,
        checkOutStatus: null,
        note1: null,
        note2: null,
        note3: null,
        note4: null,
        note5: null,
        note6: null,
        note7: null,
        note8: null,
        note9: null,
        note10: null
      };
      this.resetForm("form");
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1;
      this.getList();
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.resetForm("queryForm");
      this.getindexList();
    },

    // 多选框选中数据
    handleSelectionChange(selection) {
      this.ids = selection.map(item => item.id)
      this.single = selection.length!==1
      this.multiple = !selection.length
    },
    /** 新增按钮操作 */
    handleAdd() {
      this.reset();
      this.open = true;
      this.title = "添加消费详细";
    },
 /*   /!** 修改按钮操作 *!/
    handleUpdate(row) {
      this.reset();
      const id = row.id| this.ids
      getProject(id).then(response => {
        this.form = response.data;
        this.open = true;
        this.title = "修改消费详细";
      });
    },*/
    indexMethod(index) {
      index = (index + 1) + (this.queryParams.pageNum - 1) * this.queryParams.pageSize
      return index
    },
    /** 提交按钮 */
    submitForm() {
      this.$refs["form"].validate(valid => {
        if (valid) {
          if (this.form.ID != null) {
            updateDetails(this.form).then(response => {
              this.$modal.msgSuccess("修改成功");
              this.open = false;
              this.getList();
            });
          } else {
            addDetails(this.form).then(response => {
              this.$modal.msgSuccess("新增成功");
              this.open = false;
              this.getList();
            });
          }
        }
      });
    },
    /** 删除按钮操作 */
    handleDelete(row) {
      const IDs = row.ID || this.ids;
      this.$modal.confirm('是否确认删除消费详细编号为"' + IDs + '"的数据项？').then(function() {
        return delDetails(IDs);
      }).then(() => {
        this.getList();
        this.$modal.msgSuccess("删除成功");
      }).catch(() => {});
    },
    /** 导出按钮操作 */
    handleExport() {
      this.download('project/details/export', {
        ...this.queryParams
      }, `details_${new Date().getTime()}.xlsx`)
    }
  }
}
</script>

<style >


</style>
